<!--  -->
<template>
  <div class="bottom-bar">
      <div class="bar-left">
          <span><i class="icon-service"></i><p>客服</p></span>
          <span><i class="icon-shop"></i><p>店铺</p></span>
          <span><i class="icon-calv"></i><p>收藏</p></span>
      </div>
      <div class="bar-right">
          <span class="bar-car" @click="car_click">加入购物车</span>
          <span class="bar-buy">购买</span>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods:{
      car_click() {
          this.$emit('car_click')
      }
  }
}
</script>

<style  scoped>
    .bottom-bar{
        position: fixed;
        display: flex;
        height: 49px;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
    }
    .bar-left{
        display: flex;
        flex: 1;
        font-size: 13px;
        text-align: center;
    }
    .bar-left span {
        flex: 1;
        position: relative;
    }
    .bar-left i {
        display: block;
        margin: 7px 0 3px 16px;
        width: 22px;
        height: 22px;
        background: url('~assets/img/detail/detail_bottom.png') 0 0/100%;
    }
    .bar-left .icon-service{
        background-position: 0 -52px;
    }
    .bar-left .icon-shop {
        background-position: 0 -97px;
    }
    .bar-left .icon-calv {
        background-position: 0 0;
    }
    .bar-right {
        display: flex;
        flex: 1;
    }
    .bar-right span {
        flex: 1;
        text-align: center;
        line-height: 49px;
    }
    .bar-car {
        background-color: #ffe817;
    }
    .bar-buy {
        background-color: #f69;
        color: #fff;
    }
</style>
